<template>
  <div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <div class="lg:col-span-2">
        <div class="aspect-video bg-muted rounded-lg overflow-hidden">
          <video
            ref="videoPlayer"
            class="w-full h-full object-cover"
            :src="currentVideo.videoUrl"
            :poster="currentVideo.thumbnail"
            controls
          ></video>
        </div>
        <h1 class="text-2xl font-bold mt-4">{{ currentVideo.title }}</h1>
        <div class="flex items-center justify-between mt-2">
          <div class="flex items-center space-x-4">
            <div class="w-10 h-10 rounded-full bg-muted overflow-hidden">
              <img :src="currentVideo.channelAvatar" :alt="currentVideo.channelName" class="w-full h-full object-cover" />
            </div>
            <div>
              <p class="font-semibold">{{ currentVideo.channelName }}</p>
              <p class="text-sm text-muted-foreground">{{ currentVideo.subscribers }} subscribers</p>
            </div>
          </div>
          <button 
            @click="toggleSubscribe" 
            :class="[
              'px-4 py-2 rounded-md btn-animate',
              isSubscribed 
                ? 'bg-gray-200 text-gray-800 hover:bg-gray-300' 
                : 'bg-primary text-primary-foreground hover:bg-primary/90'
            ]"
          >
            {{ isSubscribed ? 'Subscribed' : 'Subscribe' }}
          </button>
        </div>
        <div class="flex items-center space-x-4 mt-4">
          <button @click="toggleLike" :class="['flex items-center px-3 py-1 border rounded-md text-sm btn-animate', isLiked ? 'bg-primary text-primary-foreground' : '']">
            <ThumbsUp :class="['mr-2 h-4 w-4', isLiked ? 'fill-current' : '']" />
            {{ currentVideo.likes }}
          </button>
          <button @click="openComments" class="flex items-center px-3 py-1 border rounded-md text-sm btn-animate">
            <MessageCircle class="mr-2 h-4 w-4" />
            {{ commentCount }}
          </button>
          <button @click="shareVideo" class="flex items-center px-3 py-1 border rounded-md text-sm btn-animate">
            <Share2 class="mr-2 h-4 w-4" />
            Share
          </button>
          <button @click="toggleSave" :class="['flex items-center px-3 py-1 border rounded-md text-sm btn-animate', isSaved ? 'bg-primary text-primary-foreground' : '']">
            <Heart :class="['mr-2 h-4 w-4', isSaved ? 'fill-current' : '']" />
            {{ isSaved ? 'Saved' : 'Save' }}
          </button>
        </div>
        <div class="my-4 border-t"></div>
        <div class="bg-muted p-4 rounded-lg">
          <p class="font-semibold">Description</p>
          <p class="mt-2 text-sm">{{ currentVideo.description }}</p>
        </div>
      </div>
      <div>
        <h2 class="text-xl font-semibold mb-4">Related Videos</h2>
        <div class="h-[calc(100vh-200px)] overflow-y-auto pr-4">
          <div 
            v-for="video in relatedVideos" 
            :key="video.id" 
            @click="playVideo(video)"
            class="mb-4 bg-card rounded-lg shadow-sm cursor-pointer hover:bg-muted transition duration-300"
          >
            <div class="p-4">
              <div class="flex space-x-4">
                <div class="w-32 h-20 bg-muted rounded-md overflow-hidden">
                  <img
                    :src="video.thumbnail"
                    :alt="video.title"
                    class="w-full h-full object-cover"
                  />
                </div>
                <div class="flex-1">
                  <h3 class="font-semibold line-clamp-2">{{ video.title }}</h3>
                  <p class="text-sm text-muted-foreground mt-1">{{ video.channelName }}</p>
                  <p class="text-xs text-muted-foreground mt-1">{{ video.views }} views • {{ video.uploadTime }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Comments Modal -->
    <div v-if="isCommentsOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
      <div class="bg-white rounded-lg w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
        <div class="flex justify-between items-center p-4 border-b">
          <h2 class="text-xl font-semibold">Comments ({{ commentCount }})</h2>
          <button @click="closeComments" class="text-gray-500 hover:text-gray-700">
            <X class="h-6 w-6" />
          </button>
        </div>
        <div class="p-4 flex-grow overflow-y-auto">
          <div v-for="comment in currentVideo.comments" :key="comment.id" class="mb-4">
            <div class="flex items-start space-x-3">
              <div class="w-8 h-8 rounded-full bg-muted overflow-hidden">
                <img :src="comment.avatar" :alt="comment.username" class="w-full h-full object-cover" />
              </div>
              <div class="flex-1">
                <p class="font-semibold">{{ comment.username }}</p>
                <p class="text-sm text-gray-600">{{ comment.text }}</p>
                <div class="flex items-center space-x-2 mt-1">
                  <button class="text-sm text-gray-500 hover:text-gray-700">
                    <ThumbsUp class="h-4 w-4 inline mr-1" />
                    {{ comment.likes }}
                  </button>
                  <button class="text-sm text-gray-500 hover:text-gray-700">Reply</button>
                  <span class="text-xs text-gray-400">{{ comment.time }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p-4 border-t">
          <div class="flex items-start space-x-3">
            <div class="w-8 h-8 rounded-full bg-muted overflow-hidden">
              <img src="/placeholder.svg?height=32&width=32" alt="Your Avatar" class="w-full h-full object-cover" />
            </div>
            <div class="flex-1">
              <textarea
                v-model="newComment"
                placeholder="Add a comment..."
                class="w-full p-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
                rows="3"
              ></textarea>
              <div class="flex justify-end mt-2">
                <button 
                  @click="addComment" 
                  :class="['px-4 py-2 bg-primary text-primary-foreground rounded-md btn-animate', isCommenting ? 'btn-loading' : 'hover:bg-primary/90']"
                  :disabled="isCommenting"
                >
                  {{ isCommenting ? 'Commenting...' : 'Comment' }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.btn-animate {
  @apply transition-all duration-300 ease-in-out;
}

.btn-animate:hover {
  @apply transform scale-105 shadow-lg;
}

.btn-animate:active {
  @apply transform scale-95;
}

.btn-loading {
  @apply relative overflow-hidden;
}

.btn-loading::after {
  content: "";
  @apply absolute inset-0 bg-white bg-opacity-30;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
</style>

<script setup>
import { ref, computed } from 'vue'
import { ThumbsUp, MessageCircle, Share2, Heart, X } from 'lucide-vue-next'

const isCommentsOpen = ref(false)
const newComment = ref('')
const videoPlayer = ref(null)
const isSubscribed = ref(false)
const isLiked = ref(false)
const isSaved = ref(false)
const isCommenting = ref(false)

const videos = ref([
  {
    id: 1,
    title: "Amazing Nature Documentary",
    channelName: "Nature Channel",
    channelAvatar: "/placeholder.svg?height=40&width=40&text=NC",
    subscribers: "1M",
    likes: "123K",
    views: "1.5M",
    uploadTime: "2 days ago",
    description: "Explore the wonders of nature in this breathtaking documentary.",
    videoUrl: "https://www.example.com/video1.mp4",
    thumbnail: "/placeholder.svg?height=180&width=320&text=Nature",
    comments: [
      { id: 1, username: 'User1', avatar: '/placeholder.svg?height=32&width=32&text=U1', text: 'Great video!', likes: 10, time: '2 hours ago' },
      { id: 2, username: 'User2', avatar: '/placeholder.svg?height=32&width=32&text=U2', text: 'I learned a lot from this.', likes: 5, time: '1 hour ago' },
    ]
  },
  {
    id: 2,
    title: "Cooking Masterclass: Italian Cuisine",
    channelName: "Gourmet Chefs",
    channelAvatar: "/placeholder.svg?height=40&width=40&text=GC",
    subscribers: "500K",
    likes: "45K",
    views: "750K",
    uploadTime: "1 week ago",
    description: "Learn to cook authentic Italian dishes with our expert chef.",
    videoUrl: "https://www.example.com/video2.mp4",
    thumbnail: "/placeholder.svg?height=180&width=320&text=Cooking",
    comments: [
      { id: 1, username: 'FoodLover', avatar: '/placeholder.svg?height=32&width=32&text=FL', text: 'Delicious recipes!', likes: 15, time: '3 hours ago' },
      { id: 2, username: 'ItalianChef', avatar: '/placeholder.svg?height=32&width=32&text=IC', text: 'Authentic techniques, bravo!', likes: 8, time: '2 hours ago' },
    ]
  },
  {
    id: 3,
    title: "Advanced JavaScript Tutorial",
    channelName: "Code Masters",
    channelAvatar: "/placeholder.svg?height=40&width=40&text=CM",
    subscribers: "750K",
    likes: "67K",
    views: "900K",
    uploadTime: "3 days ago",
    description: "Master advanced JavaScript concepts with this comprehensive tutorial.",
    videoUrl: "https://www.example.com/video3.mp4",
    thumbnail: "/placeholder.svg?height=180&width=320&text=JavaScript",
    comments: [
      { id: 1, username: 'CodeNinja', avatar: '/placeholder.svg?height=32&width=32&text=CN', text: 'This helped me level up my skills!', likes: 20, time: '1 day ago' },
      { id: 2, username: 'WebDev101', avatar: '/placeholder.svg?height=32&width=32&text=WD', text: 'Great explanation of complex topics.', likes: 12, time: '12 hours ago' },
    ]
  },
])

const currentVideo = ref(videos.value[0])
const relatedVideos = computed(() => videos.value.filter(video => video.id !== currentVideo.value.id))

const commentCount = computed(() => currentVideo.value.comments.length)

const openComments = () => {
  isCommentsOpen.value = true
}

const closeComments = () => {
  isCommentsOpen.value = false
}

const toggleSubscribe = () => {
  isSubscribed.value = !isSubscribed.value
}

const toggleLike = () => {
  isLiked.value = !isLiked.value
  if (isLiked.value) {
    currentVideo.value.likes = (parseInt(currentVideo.value.likes) + 1).toString() + 'K'
  } else {
    currentVideo.value.likes = (parseInt(currentVideo.value.likes) - 1).toString() + 'K'
  }
}

const toggleSave = () => {
  isSaved.value = !isSaved.value
}

const shareVideo = () => {
  // 实现分享功能
  alert('Sharing video: ' + currentVideo.value.title)
}

const addComment = async () => {
  if (newComment.value.trim()) {
    isCommenting.value = true
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    currentVideo.value.comments.unshift({
      id: currentVideo.value.comments.length + 1,
      username: 'You',
      avatar: '/placeholder.svg?height=32&width=32&text=You',
      text: newComment.value,
      likes: 0,
      time: 'Just now'
    })
    newComment.value = ''
    isCommenting.value = false
  }
}

const playVideo = (video) => {
  currentVideo.value = video
  if (videoPlayer.value) {
    videoPlayer.value.load()
    videoPlayer.value.play()
  }
}
</script>